<template>
    <div>
        <div class="shoppingBox">
            <div class="shoppigItem" v-for="item in data">
                <div class="shopImage">
                    <n-carousel style="height:220px" draggable :interval="2000" centered-slides loop v-if="item.rotationImgsJson.length"  autoplay>
                        <n-carousel-item v-for="(image,index) in item.rotationImgsJson" style="width: 100%">
                            <n-image
                            :preview-disabled="true"
                            style="object-fit: contain;display: flex;
                                justify-content: center;
                                align-items: center;"
                            :src="Https()+image"/>
                        </n-carousel-item>
                    </n-carousel>
                </div>
                <div style="padding:10px 20px">
                    <div>商品名称:{{item.goodsName}}</div>
                    <div>商品库存:{{item.limitNum}}</div>
                    <div>商品价格:￥{{item.goodsPrice}}</div>
                </div>
                <div class="shopBuy">
                    <NButton type="error" >
                        收藏
                    </NButton>
                     <NButton type="primary" @click="showModalBuy(item)">
                        购买
                    </NButton>
                </div>
            </div>
        </div>

          <n-modal v-model:show="showModal">
            <n-card
            style="width: 360px"
            title="支付方式"
            :bordered="false"
            size="huge"
            role="dialog"
            aria-modal="true"
            >
            <div class="userClass"> 
                <n-select
                @update:value="selectUser"
                v-model:value="usersOpenid"
                  :style="{ width: '300px' }" 
                  filterable 
                  placeholder="请选择用户"
                  :options="userList"
                  clearable
                />
            </div>
            <div class="payItem">
                <div>
                    <n-button type="primary" @click="onBuy(1)">
                        微信支付
                    </n-button>
                </div>
                <div>
                    <n-button type="info" @click="onBuy(2)">
                        支付宝支付
                    </n-button>
                </div>
                <div>
                    <n-button type="error" @click="onBuy(3)">
                        余额支付
                    </n-button>
                </div>
                <div>
                    <n-button type="warning" @click="onBuy(4)">
                        月卡支付
                    </n-button>
                </div>
            </div>
            </n-card>
        </n-modal>
    </div>
</template>

<script setup lang="ts">
import { Https,setPagination } from "@/utils"
import api from './api'
import { nextTick, onMounted, ref } from 'vue'

onMounted(()=>{
    usersList();
    List();
})
const userList = ref([])
async function usersList() {
    const res: any = await api.usersListApi(userParams.value)
    if(res.code == 200) {
        userList.value = res.data.list
        userList.value.map(item=>{
            item['value'] = item.openid
            item['label'] = item.nickName
        })
    }
}
const showModal = ref(false)
const userParams = ref({
  pageNum: 1,
  pageSize: 200,
  keyword: '',
})
const params = ref({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  user_id:''
})
const data = ref([])
const usersOpenid = ref(null)
const usersInfo = ref(null)
const orderItem = ref('')
const showModalBuy = (item) =>{
    orderItem.value = item
    showModal.value=true
}
const selectUser = (item) =>{
    console.log(item)
    for (let index = 0; index < userList.value.length; index++) {
        if(userList.value[index].value == item){
            usersInfo.value = userList.value[index]
        }
        
    }
}
async function onBuy(index) {
    if(index == 3){
        if(usersInfo.value){
            var orderItems = {
            ...orderItem.value,
            openid:usersInfo.value.openid,
            phone:usersInfo.value.phone,
            nickName:usersInfo.value.nickName,
            head_img:usersInfo.value.head_img,
            paypal_type:'3',  // 支付类型
            order_type:'1' // 1普通订单
        }
        const res: any = await api.placeAnOrderApi(orderItems)
        if(res.code == 200){
            $message.success('支付成功!')
            showModal.value = false
        }
    }else{
        $message.error('请选择用户')
    }
    }else{
         $message.error('暂不支持')
    }
    
   
}


async function List() {

    const res: any = await api.goodsListApi(params.value)
    if(res.code == 200){
        data.value = res.data.list
        data.value.map(item=>{
            if(item.rotationImgsJson){
                item.rotationImgsJson = item.rotationImgsJson.split(",")
            }
            
        })
    }
        
   
}

</script>

<style scoped>
    .shoppingBox{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
        grid-auto-rows: 400px;
        gap: 10px;
    }
    .shoppigItem{
        width: 100%;
        border: 1px solid #eee;margin: 10px;
        transition-duration: 0.5s, 0.1s;
        transition-property: background, box-shadow, background-color, margin,border;
        border-radius: 8px;
    }
    .shoppigItem:hover{
        border: 1px solid #316c72;margin: 10px;
        border-radius: 8px;
        background: #ccc;
    }
    .shopImage{
        height: 230px;
    }
    .shopBuy{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        gap: 20px;
    }
    .payItem{
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        gap: 20px;
    }
    .userClass{
        padding:0px 0px 20px 0;
    }
</style>